<template>
    <div>
        <div class="auditBox">
            <div class="infoBox" v-for="(item, index) in list" :key="index">
                <ul>
                    <li class="clearfix">
                        <div class="name">{{item.name}}</div>
                        <div class="phone">{{item.phone}}</div>
                        <div class="personnel family" v-if="type == 1">陪同家属</div>
                        <div class="personnel patients" v-if="type == 2">患者</div>
                    </li>
                    <li class="Idcard">{{item.cardId}}</li>
                    <li>{{item.addr}}</li>
                </ul>
            </div>
            <div v-if="!list[0]" class="info">没有添加人员信息</div>
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import comButtom from './buttom'

    export default {
        data() {
            return {
                tk: '',
                type: '',
                list: []
            }
        },
        mounted() {
            this.tk = this.$route.query.tk
            this.type = this.$route.query.type
            this.init()
        },
        methods: {
            init() {
                this.$vux.loading.show()
                this.$http.post('/recorder/recordInfo?tk=' + this.tk).then(result => {
                    if (result.success && result.data) {
                        this.list = result.data.familyMember
                        this.$vux.loading.hide()
                    }
                })
            }
        },
        components: {
            comButtom
        }
    }
</script>

<style scoped lang="less">
    .info {
        margin: 2rem;
        text-align: center;
        font-size: .28rem;
        color: #999;
    }
    .auditBox {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: .2rem;

        .infoBox {
            /*height: 2.6rem;*/
            padding: .3rem;
            box-shadow: 0 0 .2rem rgba(0, 0, 0, .1);
            margin-bottom: .2rem;
            border-radius: 3px;

            ul {
                li {
                    overflow: hidden;
                    width: 100%;

                    div {
                        float: left;
                    }

                    .name {
                        min-width: 20%;
                        margin-right: .3rem;
                    }

                    .phone {
                        /*margin-right: 1.6rem;*/
                    }

                    .personnel {
                        padding: 0 .2rem;
                        border-radius: .3rem;
                        color: #fff;
                        float: right;
                    }

                    .patients {
                        background-color: #FF6464;
                    }

                    .family {
                        background-color: #FFC565;
                    }

                    .staff {
                        background-color: #658CFF;
                    }
                }

                .Idcard {
                    margin: .3rem 0;
                }
            }
        }
    }
</style>
